<html lang="zh-cn">
    
    <head>
        <title>Zero影院</title>
        {% include "include/head.html" %}
        <link href="/static/css/gloab.css" rel="stylesheet">
        <link href="/static/css/register.css" rel="stylesheet">
        <script src="/static/js/register.js"></script>
    </head>
    
    <body class="home">
        {% include "include/nav.html" %}
        <div id="main">
            {% include "include/tag.html" %}
            <div class="mikd">
                <div class="mi_btcon" style="padding: 20px;">
                    <center><h2>用户注册</h2></center>
                </div>
            </div>
            <div class="mikd">
                <div class="login-box f-mt10 f-pb50">
                    <div class="main bgf">
                        <div class="reg-box-pan display-inline"{% if request.session.is_login %} style="display: none;"><script type="text/javascript">show_tip("您已登录，请注销后再进行注册。","index.html",5);</script> {% endif %}>

                            <!-- 注册步骤中列表 -->
                            <div class="step">
                                <ul>
                                    <li class="col-xs-3 on"> <span class="num"><em class="f-r5"></em><i>1</i></span>  <span class="line_bg lbg-r"></span>
                                        <p class="lbg-txt">填写账户信息</p>
                                    </li>
                                    <li class="col-xs-3 {% if request.session.user_reg_step >= 1 %}on{% endif %}"> <span class="num"><em class="f-r5"></em><i>2</i></span>
                                        <span class="line_bg lbg-l"></span>
                                        <span class="line_bg lbg-r"></span>
                                        <p class="lbg-txt">验证账户信息</p>
                                    </li>
                                    <li class="col-xs-3" {% if request.session.user_reg_step >= 2 %}on{% endif %}> <span class="num"><em class="f-r5"></em><i>3</i></span>
                                        <span class="line_bg lbg-l"></span>
                                        <span class="line_bg lbg-r"></span>
                                        <p class="lbg-txt">完善用户信息</p>
                                    </li>
                                    <li class="col-xs-3"> <span class="num"><em class="f-r5"></em><i>4</i></span>
                                        <span class="line_bg lbg-l"></span>
                                        <p class="lbg-txt">注册成功</p>
                                    </li>
                                </ul>
                            </div>

                            <div class="reg-box" id="verifyCheck" style="margin-top:20px;">

                                <form class="part1" id="part1" onsubmit="return reg1();"  {% if request.session.user_reg_step %} style="display:none"{% endif %}>
                                    {% csrf_token %}
                                    <div class="item col-xs-12"> <span class="intelligent-label f-fl"><b class="ftx04">*</b>用户名：</span>
                                        <div class="f-fl item-ifo">
                                            <input type="text" name="user_name" maxlength="20" class="txt03 f-r3 required" tabindex="1" data-valid="isNonEmpty||between:3-20||isUname" data-error="用户名不能为空||用户名长度3-20位||只能输入中文、字母、数字、下划线，且以中文或字母开头" id="adminNo"> <span class="ie8 icon-close close hide"></span>
                                            <label class="icon-sucessfill blank hide"></label>
                                            <label class="focus"><span>3-20位，中文、字母、数字、下划线的组合，以中文或字母开头</span>
                                            </label>
                                            <label class="focus valid"></label>
                                        </div>
                                    </div>
                                    <div class="item col-xs-12"> <span class="intelligent-label f-fl"><b class="ftx04">*</b>邮箱：</span> 
                                        <div class="f-fl item-ifo">
                                            <input type="email" class="txt03 f-r3 required" name="user_mail" keycodes="email" data-valid="isNonEmpty||isEmail" data-error="邮箱地址不能为空||邮箱地址格式不正确" tabindex="2" id="email" required="required"/> <span class="ie8 icon-close close hide"></span>
                                            <label class="icon-sucessfill blank hide"></label>
                                            <label class="focus">请填写有效的邮箱地址</label>
                                            <label class="focus valid"></label>
                                        </div>
                                    </div>
                                    <div class="item col-xs-12"> <span class="intelligent-label f-fl"><b class="ftx04">*</b>手机号：</span> 
                                        <div class="f-fl item-ifo">
                                            <input type="text" class="txt03 f-r3 required" name="user_phone" keycodes="tel" tabindex="2" data-valid="isNonEmpty||isPhone" data-error="手机号码不能为空||手机号码格式不正确" maxlength="11" id="phone"> <span class="ie8 icon-close close hide"></span>
                                            <label class="icon-sucessfill blank hide"></label>
                                            <label class="focus">请填写11位有效的手机号码</label>
                                            <label class="focus valid"></label>
                                        </div>
                                    </div>
                                    <div class="item col-xs-12"> <span class="intelligent-label f-fl"><b class="ftx04">*</b>性别：</span> 
                                        <div class="f-fl item-ifo">
                                            <input type="radio" id="test_radio1" name="sex" value="1" />男 &nbsp;&nbsp;
                                            <input type="radio" id="test_radio2" name="sex" value="2" />女
                                        </div>
                                    </div>
                                    <div class="item col-xs-12"> <span class="intelligent-label f-fl"><b class="ftx04">*</b>密码：</span> 
                                        <div class="f-fl item-ifo">
                                            <input type="password" id="password" name="user_passwd" maxlength="20" class="txt03 f-r3 required" tabindex="3" style="ime-mode:disabled;" onpaste="return  false" autocomplete="off" data-valid="isNonEmpty||between:6-20||level:2" data-error="密码不能为空||密码长度6-20位||该密码太简单，有被盗风险，建议字母+数字的组合"> <span class="ie8 icon-close close hide" style="right:55px"></span>
                                            <span class="showpwd" data-eye="password"></span> 
                                            <label class="icon-sucessfill blank hide"></label>
                                            <label class="focus">6-20位英文（区分大小写）、数字、字符的组合</label>
                                            <label class="focus valid"></label> <span class="clearfix"></span>
                                            <label class="strength">	<span class="f-fl f-size12">安全程度：</span>
    	                                    <b><i>弱</i><i>中</i><i>强</i></b>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="item col-xs-12"> <span class="intelligent-label f-fl"><b class="ftx04">*</b>确认密码：</span> 
                                        <div class="f-fl item-ifo">
                                            <input type="password" maxlength="20" class="txt03 f-r3 required" tabindex="4" style="ime-mode:disabled;" onpaste="return  false" autocomplete="off" data-valid="isNonEmpty||between:6-16||isRepeat:password" data-error="密码不能为空||密码长度6-16位||两次密码输入不一致" id="rePassword"> <span class="ie8 icon-close close hide" style="right:55px"></span>
                                            <span class="showpwd" data-eye="rePassword"></span>
                                            <label class="icon-sucessfill blank hide"></label>
                                            <label class="focus">请再输入一遍上面的密码</label>
                                            <label class="focus valid"></label>
                                        </div>
                                    </div>
                                    <div class="item col-xs-12"> <span class="intelligent-label f-fl"><b class="ftx04">*</b>验证码：</span> 
                                        <div class="f-fl item-ifo">
                                            <input type="text" maxlength="4" name="randCode" class="txt03 f-r3 f-fl required" tabindex="4" style="width:167px" id="randCode" data-valid="isNonEmpty||isNonRandCode" data-error="验证码不能为空||验证码不符合要求"> <span class="ie8 icon-close close hide"></span>
                                            <label class="f-size12 c-999 f-fl f-pl10" onclick="re_captcha();">
                                                <img src="api/captcha" style="width: 90px;height: 35px;" id="imgCode">
                                            </label>
                                            <label class="icon-sucessfill blank hide" style="left:380px"></label>
                                            <label class="focusa">看不清？<a href="javascript:;" onclick="re_captcha();" class="c-blue">换一张</a>
                                            </label>
                                            <label class="focus valid" style="left:370px"></label>
                                        </div>
                                    </div>
                                    <div class="item col-xs-12" style="height:auto"> <span class="intelligent-label f-fl">&nbsp;</span> 
                                        <p class="f-size14 required" data-valid="isChecked" data-error="请先同意条款">
                                            <input type="checkbox" checked="checked"><a href="javascript:showoutc();" class="f-ml5">我已阅读并同意条款</a>
                                        </p>
                                        <label class="focus valid" id="error_msg1"></label>
                                    </div>
                                    <div class="item col-xs-12"> <span class="intelligent-label f-fl">&nbsp;</span> 
                                        <div class="f-fl item-ifo"> <input type="submit" class="btn btn-blue f-r3" id="btn_part1" value="注册"/>
                                        </div>
                                    </div>
                                </form>

                                <form class="part2" id="part2" onsubmit="return reg2();" {% if request.session.user_reg_step != 1 %} style="display:none"{% endif %}>
                                    {% csrf_token %}
                                    <div class="alert alert-info" style="width:700px">请仔细检查您填的邮箱，确保您的邮件真实有效。</div>
                                    <div class="item col-xs-12 f-mb10"> <span class="intelligent-label f-fl"><b class="ftx04">*</b>邮箱：</span>
                                        <div class="f-fl item-ifo">
                                            <input type="email" class="txt03 f-r3 required" name="user_mail" value="{{ request.session.user_email }}" keycodes="email" data-valid="isNonEmpty||isEmail" data-error="邮箱地址不能为空||邮箱地址格式不正确" tabindex="2" id="reg_email" required="required"/> <span class="ie8 icon-close close hide"></span>
                                            <label class="icon-sucessfill blank hide"></label>
                                            <label class="focus">请填写有效的邮箱地址</label>
                                            <label class="focus valid"></label>
                                        </div>
                                    </div>
                                    <!-- <div class="item col-xs-12"> <span class="intelligent-label f-fl"><b class="ftx04">*</b>验证码：</span> 
                                        <div class="f-fl item-ifo">
                                            <input type="text" maxlength="6" id="verifyNo" name="emailCode" class="txt03 f-r3 f-fl required" tabindex="4" style="width:167px" data-valid="isNonEmpty||isInt" data-error="验证码不能为空||请输入6位数字验证码">	<span class="btn btn-gray f-r3 f-ml5 f-size13" id="time_box" disabled="" style="width:97px;display:none;">发送验证码</span>
                                            <span class="btn btn-gray f-r3 f-ml5 f-size13" id="verifyYz" style="width:97px;" data-set="1">发送验证码</span>
                                            <span class="ie8 icon-close close hide" style="right:130px"></span>
                                            <label class="icon-sucessfill blank hide"></label>
                                            <label class="focus"><span>请查收邮箱中的邮件，并填写邮件中的验证码（此验证码3分钟内有效）</span>
                                            </label>
                                            <label class="focus valid"></label>
                                        </div>
                                    </div> -->
                                    <p style="margin-top: 10px;text-align: center;height: 20px;color: red;" id="error_msg2"></p>
                                    <div class="item col-xs-12"> <span class="intelligent-label f-fl">&nbsp;</span> 
                                        <div class="f-fl item-ifo"> <input type="submit" class="btn btn-blue f-r3" id="btn_part2" value="确认完毕"/>
                                        </div>
                                    </div>
                                </form>

                                <form class="part3" id="part3" onsubmit="return reg3();" enctype="multipart/form-data" {% if request.session.user_reg_step != 2 %} style="display:none"{% endif %}>
                                    {% csrf_token %}
                                    <center style="float:left;width:45%;">
                                        <div class="item col-xs-12"> <span class="intelligent-label f-fl">昵称：</span> 
                                            <div class="f-fl item-ifo">
                                                <input type="text" maxlength="20" name="user_uname" class="txt03 f-r3" tabindex="1" id="uName">
                                            </div>
                                        </div>
                                        <div class="item col-xs-12"> <span class="intelligent-label f-fl">年龄：</span> 
                                            <div class="f-fl item-ifo">
                                                <input type="number" maxlength="3" name="user_age" class="txt03 f-r3" tabindex="1" id="uAge">
                                            </div>
                                        </div>
                                        <div class="col-xs-12"> <span class="intelligent-label f-fl">头像：</span> 
                                            <div class="f-fl item-ifo">
                                                <div style="">
                                                    <img class="" id="preview" src="static/images/user.jpg" alt="" />
                                                </div>
                                                <input type="file" id="fileid" class="txt03 f-r3"  name="user_img" onchange="preImg(this.id,'imgid');" accept="image/*" />
                                            </div>
                                        </div>
                                    </center>
                                    <center style="float:left;width:45%;" data-toggle="distpicker">
                                        <div class="item col-xs-12"> <span class="intelligent-label f-fl">出生日期：</span>
                                            <div class="f-fl item-ifo">
                                                <input type="date" name="user_birthday" class="txt03 f-r3" tabindex="1" >
                                            </div>
                                        </div>
                                        <div class="item col-xs-12"> <span class="intelligent-label f-fl">省/直辖市：</span> 
                                            <div class="f-fl item-ifo">
                                                <select class="form-control" name="provinceName" onchange="appendList(this.options[this.options.selectedIndex].getAttribute('code'),'city')" data-province="---- 选择省 ----" id="province"></select>
                                            </div>
                                        </div>
                                        <div class="item col-xs-12"> <span class="intelligent-label f-fl">城市：</span> 
                                            <div class="f-fl item-ifo">
                                                <select class="form-control" name="cityName" onchange="appendList(this.options[this.options.selectedIndex].getAttribute('code'),'area')" data-city="---- 选择市 ----" id="city"></select>
                                            </div>
                                        </div>
                                        <div class="item col-xs-12"> <span class="intelligent-label f-fl">区县：</span> 
                                            <div class="f-fl item-ifo">
                                                <select class="form-control" name="districtName" data-district="---- 选择区 ----" id="area"></select>
                                            </div>
                                        </div>
                                        <div class="item col-xs-12"> <span class="intelligent-label f-fl">详细地址：</span> 
                                            <div class="f-fl item-ifo">
                                                <input type="text" name="user_address" maxlength="50" class="txt03 f-r3" tabindex="1" id="uAddress">
                                            </div>
                                        </div>
                                    </center>
                                    <section class="aui-flexView">
                                        <header class="aui-navBar aui-navBar-fixed">
                                            <div class="aui-center">
                                                <span class="aui-center-title">请选择您喜爱的电影类型</span>
                                            </div>
                                        </header>
                                        <input type="hidden" name="user_prefer" id="user_prefer" value="" />
                                        <section class="aui-scrollView">
                                            <div class="aui-ui-choose">
                                                <ul class="ui-choose choose-type-right" multiple="multiple" id="uc_01">
                                                    {% for tag in data.movie_tag %}
                                                        <li>{{ tag.movie_type }}</li>
                                                    {% endfor %}
                                                </ul>
                                            </div>
                                        </section>
                                        <header class="aui-navBar aui-navBar-fixed">
                                            <div class="aui-center">
                                                <span class="aui-center-title">选择你的兴趣爱好</span>
                                            </div>
                                        </header>
                                        <input type="hidden" name="user_hobbies" id="user_hobbies" value="" />
                                        <section class="aui-scrollView">
                                            <div class="aui-ui-choose">
                                                <ul class="ui-choose choose-type-right" multiple="multiple" id="uc_02">
                                                    {% for tag in data.user_hobbies %}
                                                        <li>{{ tag.user_prefer }}</li>
                                                    {% endfor %}
                                                </ul>
                                            </div>
                                        </section>
                                    </section>
                                    <p style="margin-top: 10px;text-align: center;height: 20px;color: red;" id="error_msg3"></p>
                                    <div class="item col-xs-12"> <span class="intelligent-label f-fl">&nbsp;</span> 
                                        <div class="aui-center"> <input type="submit" class="btn btn-blue f-r3" id="btn_part3" value="下一步"/>
                                            <a href="javascript:;" class="btn btn-blue f-r3" style="margin-left: 50px;background-color: #929090;border: none;" id="btn_part4" onclick="reg3_jump();">跳过</a>
                                        </div>
                                    </div>
                                </form>
                                
                                <div class="part4 text-center" style="display:none">
                                    <h3>恭喜<span id="userName">{{ request.session.user_name }}</span>，您已注册成功，请准备登录！</h3>
                                    <p class="c-666 f-mt30 f-mb50">页面将在 <strong id="times" class="f-size18">10</strong> 秒钟后，跳转到 <a href="./" class="c-blue">首页</a>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="m-sPopBg" style="z-index:998;"></div>
                <div class="m-sPopCon regcon">
                    <div class="m-sPopTitle"><strong>服务协议条款</strong><b id="sPopClose" class="m-sPopClose" onclick="closeClause()">×</b>
                    </div>
                    <div class="apply_up_content">
                        <pre class="f-r0"><strong>同意以下服务条款，提交注册信息</strong>
                        </pre>
                    </div>
                    <center><a class="btn btn-blue btn-lg f-size12 b-b0 b-l0 b-t0 b-r0 f-pl50 f-pr50 f-r3" href="javascript:closeClause();">已阅读并同意此条款</a>
                    </center>
                </div>
                <script type="text/javascript">

                    // 页面就绪事件
                    $(function(){
                        var defaultOption="<option value=''>---- 请选择 ----</option>";

                        // 为3个<select>添加默认选项
                        $("#province").append(defaultOption);
                        $("#city").append(defaultOption);
                        $("#area").append(defaultOption);

                        // 自动生成省级列表
                        appendList(86,"province");
                    });

                    $('.ui-choose').ui_choose();
                    var uc_01 = $('#uc_01').data('ui-choose');
                    // uc_01.click = function (index, item) {
                    // 	console.log('click', index);
                    // };
                    uc_01.change = function (index, item) {
                        var arr=[];
                        item.find(".selected").each(function(i,val){ arr[i]=val.innerHTML;});
                        console.log(arr);
                        $("#user_prefer").val(arr);
                        // $("#user_prefer").val(index);
                        // console.log('change', index);
                    };
                    var uc_02 = $('#uc_02').data('ui-choose');
                    // uc_02.click = function (index, item) {
                    // 	console.log('click', index);
                    // };
                    uc_02.change = function (index, item) {
                        var arr=[];
                        item.find(".selected").each(function(i,val){ arr[i]=val.innerHTML;});
                        console.log(arr);
                        $("#user_hobbies").val(arr);
                        // $("#user_hobbies").val(index);
                        // console.log('change', index);
                    };
                </script>
            </div>
        </div>
        
        {% include "include/footer.html" %}
    </body>

</html>